<!-- 
 @Author: LW  
 @Date: 2021-01-18 14:59:29  
 @function:选择按钮
 -->
<template>
  <div>
    <div ref="treeHeight" class="tree-content">
     <el-transfer
       :titles=title
        v-model="selectData"
        :props="{ key: 'id',label: 'title'}"
        :data="fromData"
        >
     </el-transfer>
    </div>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm()"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import FlowInfoHttp from "@/api/flow/flowInfo"; //http
//定义变量
const {
  loadFlowButtonList, //获取流程按钮列表
} = FlowInfoHttp;
export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  components: {},
  props: ["formInfo"], //父界面v-bind:editInfo一致
  data() {
    return {
      /**树形控件*/
      fromData: [],
      title: ["未选列表", "已选列表"],
      selectData: [],
      selectInfo:{
        id:"",
        label:"",
      }
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
    this.loadFlowButtonList();
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {},
  methods: {
    //获取步骤按钮
    loadFlowButtonList() {
      let par ={
        stepId:this.formInfo.id
      };
      loadFlowButtonList(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
           this.fromData = data.Data;
           this.selectData = [];
           this.fromData.forEach(element => {
            if (element.is_checked) {  
              this.selectData.push(element.id);
            }
          });
        } else {
          this.$messageTip.warning(data.Msg);
        }
      });
    },
    submitForm() 
    {
      this.ReturnTo(this.selectData);
      if (this.formInfo.optType!=undefined) {
         this.$emit("callBack",{
            type:this.formInfo.optType,
            info:this.selectInfo
         });
      } else {
        this.$emit("callBack",{
            type:"selectButton",
            info:this.selectInfo
         });
      }
    },
    //组成返回类容
    ReturnTo(list) {
      
      for (let i = 0; i < list.length; i++) {
        this.fromData.forEach(element => {
          if (element.id==list[i]) {
              if(this.selectInfo.id!=""){
                if (this.selectInfo.id.indexOf(element.id)==-1) {
                  this.selectInfo.id = this.selectInfo.id +","+ element.id;
                  this.selectInfo.label = this.selectInfo.label +","+element.title;
                }
              }else{
                this.selectInfo.id = element.id;
                this.selectInfo.label = element.title;
              }
          }
        }); 
      }
    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
  },
};
</script>